<template>
<div class="wos-flex wos-flex-wrap" style="padding: 5px">
	<div class="item">
		<div class="item-border">
			<div class="title wos-flex wos-flex-between">
				<div>
					<i class="iconfont icon-radio"></i>
					硬盘统计
				</div>
				<div>
					<i class="iconfont icon-shuaxin"></i>
				</div>
			</div>
			<div class="content">
				<ring title="硬盘总数" :number="guidDate.disk.x + guidDate.disk.y" :x="guidDate.disk.x" :y="guidDate.disk.y"></ring>
				<div class="wos-flex wos-flex-center wos-font-sm" style="margin:20px 0">
					<div class="wos-flex">
						<div style="margin-right: 5px"><i class="iconfont icon-yuan-blue"></i></div>
						<div>在线<br/>{{guidDate.disk.x}}个</div>
					</div>
					<div class="wos-flex" style="margin-left: 10px">
						<div style="margin-right: 5px"><i class="iconfont icon-yuan-light-blue"></i></div>
						<div>离线<br/>{{guidDate.disk.y}}个</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="item">
		<div class="item-border">
			<div class="title wos-flex wos-flex-between">
				<div>
					<i class="iconfont icon-radio"></i>
					Raid状态
				</div>
				<div>
					<i class="iconfont icon-shuaxin"></i>
				</div>
			</div>
			<div class="content">
				<ring title="Raid状态" :number="guidDate.raid.x + guidDate.raid.y + guidDate.raid.z" :x="300" :y="6"></ring>
				<div class="wos-flex wos-flex-center wos-font-sm" style="margin:20px 0">
					<div class="wos-flex">
						<div style="margin-right: 5px"><i class="iconfont icon-yuan-blue"></i></div>
						<div>正常<br/>{{guidDate.raid.x}}个</div>
					</div>
					<div class="wos-flex" style="margin-left: 10px">
						<div style="margin-right: 5px"><i class="iconfont icon-yuan-light-yellow"></i></div>
						<div>降级<br/>{{guidDate.raid.y}}个</div>
					</div>
					<div class="wos-flex" style="margin-left: 10px">
						<div style="margin-right: 5px"><i class="iconfont icon-yuan-light-blue"></i></div>
						<div>损坏<br/>{{guidDate.raid.z}}个</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="item">
		<div class="item-border">
			<div class="title wos-flex wos-flex-between">
				<div>
					<i class="iconfont icon-radio"></i>
					远程设备状态
				</div>
				<div>
					<i class="iconfont icon-shuaxin"></i>
				</div>
			</div>
			<div class="content">
				<ring title="远程设备状态" :number="guidDate.machine.x + guidDate.machine.y" :x="guidDate.machine.x" :y="guidDate.machine.y"></ring>
				<div class="wos-flex wos-flex-center wos-font-sm" style="margin:20px 0">
					<div class="wos-flex">
						<div style="margin-right: 5px"><i class="iconfont icon-yuan-blue"></i></div>
						<div>在线<br/>{{guidDate.machine.x}}个</div>
					</div>
					<div class="wos-flex" style="margin-left: 10px">
						<div style="margin-right: 5px"><i class="iconfont icon-yuan-light-blue"></i></div>
						<div>离线<br/>{{guidDate.machine.y}}个</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="item">
		<div class="item-border">
			<div class="title wos-flex wos-flex-between">
				<div>
					<i class="iconfont icon-radio"></i>
					机柜展示
				</div>
			</div>
			<div class="content">
				<ring title="机柜展示" :number="guidDate.cabinet.x + guidDate.cabinet.y" :x="guidDate.cabinet.x" :y="guidDate.cabinet.y"></ring>
				<div class="wos-flex wos-flex-center wos-font-sm" style="margin:20px 0">
					<div class="wos-flex">
						<div style="margin-right: 5px"><i class="iconfont icon-yuan-blue"></i></div>
						<div>在线<br/>{{guidDate.cabinet.x}}个</div>
					</div>
					<div class="wos-flex" style="margin-left: 10px">
						<div style="margin-right: 5px"><i class="iconfont icon-yuan-light-blue"></i></div>
						<div>离线<br/>{{guidDate.cabinet.y}}个</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="item">
		<div class="item-border">
			<div class="title wos-flex wos-flex-between">
				<div>
					<i class="iconfont icon-radio"></i>
					录像状态
				</div>
				<div>
					<i class="iconfont icon-shuaxin"></i>
				</div>
			</div>
			<div class="content">
				<pie></pie>
				<div class="wos-flex wos-flex-center wos-font-sm" style="margin:20px 0">
					<div class="wos-flex">
						<div style="margin-right: 5px"><i class="iconfont icon-yuan-blue"></i></div>
						<div>录像<br/>{{guidDate.videoStatus.y}}个</div>
					</div>
					<div class="wos-flex" style="margin-left: 10px">
						<div style="margin-right: 5px"><i class="iconfont icon-yuan-light-blue"></i></div>
						<div>未录像<br/>{{guidDate.videoStatus.x}}个</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="item" >
		<div class="item-border">
			<div class="title wos-flex wos-flex-between">
				<div>
					<i class="iconfont icon-radio"></i>
					网卡状态（Mbps）
				</div>
				<div>
					<i class="iconfont icon-shuaxin"></i>
				</div>
			</div>
			<div class="content">
				<wos-table :record="indexList" status="mini"></wos-table>
			</div>
		</div>
	</div>
</div>
</template>

<script>
	import ring from '../../components/ring/ring'
    import pie from '../../components/pie/pie'
    export default {
        name: "server",
	    components:{
            ring,
            pie
	    },
	    data:function () {
			return {
			    guidDate:{},
                indexList:[]
			}
        },
        beforeMount() {
            this.getData()
        },
        methods:{
            getData(){
                let that = this
                this.axios.get('/api/sys/server.json')
                    .then(function (response) {
                        if( response.data.code == 200) {
                            that.guidDate = response.data.guidDate
                            that.indexList = response.data.data

                        }
                    })
                    .catch(function (error) {
                        that.$message.warn('服务器连接超时，请稍后重试')
                    });
            }
        }
    }
</script>

<style scoped lang="less">
	.item{
		width: 33.33%;
		padding: 5px;

		.item-border{
			margin: 0 auto;
			border: 1px solid #D3D3D3;
			min-height: 320px;
			width: 100%;
			.title{
				padding: 10px;
				font-size: 0.75rem;
			}
			.content{
				text-align: center;
			}
		}
	}
</style>
